<template>
  <div :style="{ height: tableHeight + 'px', background: '#ffffff' }">
    <ContentWrap>
      <div class="btnWrap routeHeader">
        <div>
          <el-button @click="printDeliver" type="primary" v-hasPermi="['produce:productOutbound:print']">打印发货单</el-button>
          <el-button @click="close">关闭</el-button>
        </div>
      </div>
    </ContentWrap>

    <ContentWrap>
      <div>基本信息</div>
      <el-form class="-mb-5px" :model="queryParam" :inline="true" label-width="110px">
        <el-form-item label="发货单号" prop="trackingNumber">
          <div class="select-wrapper">
            <el-input v-model="queryParam.trackingNumber" disabled class="!w-220px" />
          </div>
        </el-form-item>
        <el-form-item label="发货申请单号" prop="sendNumber">
          <div class="select-wrapper">
            <el-input v-model="queryParam.sendNumber" disabled class="!w-220px" />
          </div>
        </el-form-item>
        <el-form-item label="清单编号" prop="inventoryNumber">
          <div class="select-wrapper">
            <el-input v-model="queryParam.inventoryNumber" disabled class="!w-220px" />
          </div>
        </el-form-item>
        <el-form-item label="订单号" prop="orderNumber">
          <div class="select-wrapper">
            <el-input v-model="queryParam.orderNumber" disabled class="!w-220px" />
          </div>
        </el-form-item>
        <el-form-item label="发货类型" prop="dictDeliveryType">
          <div class="select-wrapper">
            <el-input v-model="queryParam.dictDeliveryType" disabled class="!w-220px" />
          </div>
        </el-form-item>
        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="queryParam.customerName" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="产品编号" prop="productNumber">
          <el-input v-model="queryParam.productNumber" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="queryParam.productName" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="产品尺寸" prop="productSize">
          <el-input v-model="queryParam.productSize" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="费用占比" prop="proportionExpenses">
          <el-input v-model="queryParam.proportionExpenses" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="客户地址" prop="customerAddress">
          <el-input v-model="queryParam.customerAddress" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="装货地点" prop="packingAddress">
          <el-input v-model="queryParam.packingAddress" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="特殊要求" prop="requirements">
          <el-input v-model="queryParam.requirements" class="!w-220px" disabled />
        </el-form-item>
      </el-form>
      <div>运输信息</div>
      <el-form class="-mb-5px" :model="queryParam" :inline="true" label-width="110px">
        <el-form-item label="车牌" prop="licencePlate">
          <div class="select-wrapper">
            <el-input v-model="queryParam.licencePlate" disabled class="!w-220px" />
          </div>
        </el-form-item>
        <el-form-item label="车型" prop="vehicleModel">
          <div class="select-wrapper">
            <el-input v-model="queryParam.vehicleModel" disabled class="!w-220px" />
          </div>
        </el-form-item>
        <el-form-item label="司机称呼" prop="driverName">
          <div class="select-wrapper">
            <el-input v-model="queryParam.driverName" disabled class="!w-220px" />
          </div>
        </el-form-item>
        <el-form-item label="司机电话" prop="driverPhone">
          <div class="select-wrapper">
            <el-input v-model="queryParam.driverPhone" disabled class="!w-220px" />
          </div>
        </el-form-item>
      </el-form>
    </ContentWrap>
    <ContentWrap>
      <div class="btnWrap">
        <div>发货明细</div>
        <div> </div>
      </div>
      <el-table v-loading="loading" :data="list" border>
        <el-table-column type="index" width="55" label="序号" align="center" fixed="left"/>
        <!-- 列定义 -->
        <el-table-column align="left" width="180">
          <template #header>
            <span>项目编号</span>
          </template>
          <template #default="scope"> {{ scope.row.code }} </template>
        </el-table-column>
        <el-table-column align="left" width="180">
          <template #header>
            <span>部件编码</span>
          </template>
          <template #default="scope"> {{ scope.row.partNumber }} </template>
        </el-table-column>
        <el-table-column align="left" width="180">
          <template #header>
            <span>部件名称</span>
          </template>
          <template #default="scope"> {{ scope.row.partName }} </template>
        </el-table-column>
        <el-table-column align="left" width="180">
          <template #header>
            <span>部件规格</span>
          </template>
          <template #default="scope"> {{ scope.row.partSpecification }} </template>
        </el-table-column>

        <el-table-column align="left" width="180">
          <template #header>
            <span>备货数量</span>
          </template>
          <template #default="scope">
            {{ scope.row.prepareQuantity }}
          </template>
        </el-table-column>
        <el-table-column align="left" width="180">
          <template #header>
            <span>发货数量</span>
          </template>
          <template #default="scope">
            <span>{{ scope.row.sendQuantity }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" width="180">
          <template #header>
            <span>单位</span>
          </template>
          <template #default="scope">
             <dict-tag :type="DICT_TYPE.ORDER_PRODUCT_UNIT" :value="scope.row.dictUnit" />
            </template>
        </el-table-column>
        <el-table-column label="入库类型" align="left" width="180">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.INCOMING_TYPE" :value="scope.row.dictIncomingType" />
          </template>
        </el-table-column>
        <el-table-column label="仓库名称" align="left" width="180">
          <template #default="scope"> {{ scope.row.warehouseName }} </template>
        </el-table-column>
      </el-table>
    </ContentWrap>
  </div>
  <!-- 打印 -->
  <div v-show="false" id="printData">
    <print :detailData="queryParam" />
  </div>
</template>

<script lang="ts" setup>
  import { DICT_TYPE } from '@/utils/dict'
  import { useRoute } from 'vue-router'
  import * as ProductOutboundApi from '@/api/produce/productManagement/productOutbound'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  const tagsViewStore = useTagsViewStore()
  const routes = useRouter() // 路由
  const route = useRoute()
  import print from './print.vue'
  const queryParam = reactive({
    id: undefined,
    trackingNumber: undefined,
    sendNumber: undefined,
    inventoryNumber: undefined,
    orderNumber: undefined,
    dictDeliveryType: undefined,
    customerName: undefined,
    productNumber: undefined,
    productName: undefined,
    productSize: undefined,
    proportionExpenses: undefined,
    customerAddress: undefined,
    packingAddress: undefined,
    requirements: undefined,
    licencePlate: undefined,
    vehicleModel: undefined,
    driverName: undefined,
    driverPhone: undefined,
    deliveryDate:undefined,
    details:[]
  })
  const { push } = useRouter()
  const loading = ref(true)
  const list = ref<any>([])
  const formLoading = ref(false)
  /**关闭 */
  const close = () => {
    tagsViewStore.delView(routes.currentRoute.value)
    push('/produce/produce/productManagement/productOutbound')
  }
  // 打印发货单
  const printDeliver = () => {
    let winName, head, bdHtml
    winName = window.open('', '_blank', '') // 新窗口
    head = '<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />'
    const tabStyle = `
    <style>
      .title {
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        width: 350px;
        margin: 0 auto;
      }

      .logo {
        float: left;
        width: 200px;
        height: 50px;
      }

      .tab {
        border: 1px solid #e4e7ed;
        text-align: center;
      }

      .d-flex {
        display: flex;
        align-items: center;
      }

      .card {
        height: 50px;
        line-height: 50px;
      }

      .card-confirm {
        height: 100px;
        line-height: 100px;
      }

      .card:not(:last-child),
      .card-confirm:not(:last-child) {
        border-right: 1px solid #e4e7ed;
      }

      .height-100px {
        height: 100px;
      }

      .border-bottom {
        border-bottom: 1px solid #e4e7ed;
      }

      .width-25 {
        width: 25%;
      }

      .width-10 {
        width: 10%;
      }

      .width-20 {
        width: 20%;
      }

      .width-30 {
        width: 30%;
      }
    </style>
    `
    head += tabStyle
    bdHtml = window.document.querySelector('#printData').innerHTML
    winName.document.head.innerHTML = head
    winName.document.body.innerHTML = bdHtml
    winName.focus() //聚焦保证页面正常
    setTimeout(() => {
      winName.print()
    }, 500)
  }
  const getTrackingNumber = async(trackingNumber)=> {
    const data = await ProductOutboundApi.getTrackingNumber(trackingNumber)
    queryParam.deliveryDate = data.deliveryDate
  }
  //获取订单信息
  const getDetail = async (id) => {
    const data = await ProductOutboundApi.getProductionOuting(id)
    queryParam.id = data.id
    queryParam.trackingNumber = data.trackingNumber
    queryParam.sendNumber = data.sendNumber
    queryParam.inventoryNumber = data.inventoryNumber
    queryParam.orderNumber = data.orderNumber
    queryParam.dictDeliveryType = data.dictDeliveryType
    queryParam.customerName = data.customerName
    queryParam.productNumber = data.productNumber
    queryParam.productName = data.productName
    queryParam.productSize = data.productSize
    queryParam.proportionExpenses = data.proportionExpenses
    queryParam.customerAddress = data.customerAddress
    queryParam.packingAddress = data.packingAddress
    queryParam.requirements = data.requirements
    queryParam.licencePlate = data.licencePlate
    queryParam.vehicleModel = data.vehicleModel
    queryParam.driverName = data.driverName
    queryParam.driverPhone = data.driverPhone
    queryParam.details = data.details
    list.value = data.details
    loading.value = false
    console.log(list)
  }
  const contentHeight = ref(0)
  const refreshData = async () => {
    formLoading.value = true
    contentHeight.value = document.body.clientHeight - 127
    formLoading.value = false
  }
  // 初始化
  const tableHeight = ref(0)
  onMounted(async () => {

    tableHeight.value = document.body.clientHeight - 130
    refreshData()
    getDetail(route.query.id)
    getTrackingNumber(route.query.trackingNumber)
  })
</script>
<style lang="scss" scoped>
  .contentView {
    padding: 10px;
    background: #fff;
  }
  .tableView {
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      cursor: default;
      .el-input__inner {
        cursor: default !important;
        text-align: center;
      }
    }
  }
  .btnWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .el-table .custom-header::before {
    content: '*';
    color: red;
    margin-right: 4px; /* 根据需要调整小红星与字段的位置 */
  }
  .dropdown-width {
    width: 50px !important;
  }
  :deep(.el-form .el-input, .el-form .el-input__wrapper, .el-form .el-textarea) {
    width: 100% !important;
  }
  .select-wrapper {
    display: flex;
    align-items: center;
  }

  .search-icon {
    margin-left: -24px; /* 这里的 -24px 是根据 Icon 的宽度进行调整的 */
    cursor: pointer;
    margin-top: 5px;
  }
</style>
